<template>
    <view class="container">
        <view class="card" :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.1s;">
            <image class="logo" src="/static/logo_title.png" mode="aspectFit" />
            <!-- <view class="title">
                登 录
            </view> -->
            <view class="inputItem">
                <uni-icons type="phone" size="28" color="#4C7AF2"></uni-icons>
                <input placeholder="请输入手机号"></input>
            </view>
            <view class="inputItem">
                <uni-icons type="checkmarkempty" size="28" color="#4C7AF2"></uni-icons>
                <input placeholder="手机验证码"></input>
                <button class="sendCode" type="primary">发送验证码</button>
            </view>
            <view class="inputItem">
                <uni-icons type="locked" size="28" color="#4C7AF2"></uni-icons>
                <input placeholder="请输入密码"></input>
            </view>
            <view class="inputItem">
                <uni-icons type="font" size="28" color="#4C7AF2"></uni-icons>
                <input placeholder="图像验证码"></input>
            </view>
            <button class="login" @click="login" type="primary">登录</button>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

// 状态定义 -------------------------------------------------------------
const loading = ref(false) // 加载状态
const showAnimation = ref(false) // 动画状态

// 生命周期钩子 ------------------------------------------------------------
onMounted(() => {
    init()
})

onShow(() => {
    // 页面载入后，延时显示动画
    setTimeout(() => {
        showAnimation.value = true;
    }, 100);
})

onHide(() => {
    // 页面隐藏时，重置动画状态
    showAnimation.value = false;
})

// 方法定义 --------------------------------------------------------
const init = async () => {
    try {
        loading.value = true
        // 初始化逻辑
    } catch (error) {
        console.error(error)
        uni.showToast({
            title: '操作失败',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}

const login = async () => {
    uni.navigateTo({
        url: '/pages/menu'
    })
}
</script>

<style lang="scss" scoped>
.container {
    padding: 40rpx;
    min-height: 100vh;
    background-size: cover;
    background-image: url('https://qd-webstatic.oss-cn-beijing.aliyuncs.com/lyxCertWechar/login-background2.jpg');
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    .card {
        width: 100%;
        // height: 60vh;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 40rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;

        .logo {
            width: 260rpx;
            height: 120rpx;
            margin: 30rpx auto;
        }

        .title {
            font-size: 40rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }

        .inputItem {
            width: 100%;
            display: flex;
            align-items: center;
            margin: 20rpx 0;

            input {
                padding: 10rpx;
                font-size: 30rpx;
            }

            .sendCode {
                width: 200rpx;
                height: 70rpx;
                font-size: 30rpx;
                line-height: 70rpx;
                text-align: center;
                border-radius: 10rpx;
                background-color: #4b7dfa;
                color: #fff;
            }
        }

        .login {
            width: 100%;
            font-size: 34rpx;
            line-height: 70rpx;
            text-align: center;
            border-radius: 10rpx;
            background-color: #4b7dfa;
            color: #fff;
            margin-top: 30rpx;
        }
    }
}

// 动画效果
.card-animate {
    opacity: 0;
    transform: translateY(20rpx);
    animation: fadeInUp 0.5s forwards;
}

.cancel-login {
    color: #2b92ff;
    text-align: center;
    letter-spacing: 5rpx;
    font-size: 32rpx;
    margin-top: 40rpx;
    width: 100%;
    border-radius: 30rpx;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>